<html>
<head>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>

        .sel-border{
            border: 1px solid #d2d2d2;
            margin-top: 2px;
            position: absolute;
            top: 38px;
            left: 0;
            z-index: 999;
            width: 403px;
            background-color: #fff;
        }

        .sel-li{

            line-height: 36px;
            padding-left: 10px;
        }
        .sel-li:hover{
            background-color: #f2f2f2;
        }
        .sel-li-click{
            background-color: #75b57e;
            color: #fff;
        }

        .sel-li-click:hover{
            background-color: #75b57e;
            color: #fff;
        }
        .la-input{
            position: relative;
        }

    </style>
</head>
<body>

<div style="width: fit-content; margin: 20px auto">

    <form class="layui-form" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">选择公司</label>
            <div class="layui-input-block">
                <input type="text" name="company_id" required  lay-verify="required" placeholder="请输入公司" autocomplete="off" class="layui-input la-input" value="{$company}" onclick="showSelect('company_id')" oninput="search(this)">
                <div class="sel-border" id="company_id">
                    {volist name="params.company" id="vo"}
                    <div class="sel-li {$vo.company_id == $data.company_id?'sel-li-click':''}" data-value="{$vo.company_id}" onclick="setSelect('company_id', '{$vo.name}', this)">{$vo.name}</div>
                    {/volist}
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">招工类型</label>
            <div class="layui-input-block">
                <input type="text" name="cate_id" required  lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input la-input" value="{$category}" onclick="showSelect('cate_id')">
                <div class="sel-border" id="cate_id">
                    {volist name="params.category" id="vo"}
                    <div class="sel-li {$vo.id == $data.cate_id?'sel-li-click':''}" data-value="{$vo.id}" onclick="setSelect('cate_id', '{$vo.name}', this)">{$vo.name}</div>
                    {/volist}

                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">招工人数</label>
            <div class="layui-input-block">
                <input type="number" name="num" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input" value="{$data.num}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">期望薪资</label>
            <div class="layui-input-block">
                <input type="text" name="pay_id" required  lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input la-input" value="{$pay}" onclick="showSelect('pay_id')">
                <div class="sel-border" id="pay_id">
                    {volist name="params.pay" id="vo"}
                    <div class="sel-li {$vo.id == $data.cate_id?'sel-li-click':''}" data-value="{$vo.id}" onclick="setSelect('pay_id', '{$vo.name}', this)">{$vo.name}</div>
                    {/volist}

                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工作地点</label>
            <div class="layui-input-block">
                <input type="text" name="address" required  lay-verify="required" placeholder="请输入地点" autocomplete="off" class="layui-input" value="{$data.address}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地点经纬度</label>
            <div class="layui-input-block">
                <input type="text" name="lat" required  lay-verify="required" placeholder="请输入经纬度" autocomplete="off" class="layui-input" value="{$data.lat}{$data.id?',':''}{$data.lng}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属地区</label>
            <div class="layui-input-block">
                <select name="area_tag" lay-verify="required" id="area_tag">
                    {volist name="params.area" id="vo"}
                    <option value="{$vo.code}"  {$vo.code == $data.area_tag?'selected':''}>{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工人福利</label>
            <div class="layui-input-block">
                {volist name="params.welfare" id="vo"}
                <input type="checkbox" name="w_id" title="{$vo.name}" value="{$vo.id}" {$vo.is_check == 1?"checked":""} >
                {/volist}
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">招工描述</label>
            <div class="layui-input-block">
                <textarea name="detail" placeholder="请输入描述" class="layui-textarea">{$data.detail}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-block">
                <input type="text" name="mobile" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input" value="{$data.mobile}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">有效天数</label>
            <div class="layui-input-block">
                <select name="day" lay-verify="required">
                    <option value="7" {$data.valid_time == 604800?'selected':''}>7</option>
                    <option value="15" {$data.valid_time == 1296000?'selected':''}>15</option>
                    <option value="30" {$data.valid_time == 2592000?'selected':''}>30</option>
                    <option value="60" {$data.valid_time == 5184000?'selected':''}>60</option>
                    <option value="90" {$data.valid_time == 7776000?'selected':''}>90</option>
                </select>
            </div>
        </div>

        <input type="hidden" name="job_id" value="{$data.id}">

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn btn-primary" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>

<script src="/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="/layui/layui.js"></script>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        $(".sel-border").hide();

        //监听提交
        form.on('submit(formDemo)', function(data){

            var w_id = [];
            $("input[name='w_id']:checked").each(function (item, k) {
                w_id[w_id.length] = $(this).val()
            });

            data.field.w_id = w_id.join(',');

            var reg = new RegExp( "\n" , "g" );
            data.field.detail = data.field.detail.replace(reg, "cichuhuanhang");

            $.post("/ops/Jobs/add", data.field, function (res) {
                var res = JSON.parse(res);
                if(res.errno == 0){
                    layer.msg("操作成功")
                    window.parent.location.reload();
                }else {
                    layer.msg(res.errmsg)
                }
            });

            return false;
        });

        $("body").click(function () {
            $(".sel-border").hide();
        })
    });

    function showSelect(a) {
        $("#"+a).toggle();
        event.stopPropagation(); // 阻止冒泡
    }

    function setSelect(a, v, oj) {

        layui.use('form', function () {

            var form = layui.form;

            $('input[name='+a+']').val(v);
            $('#'+a+" .sel-li-click").removeClass('sel-li-click');
            $(oj).addClass('sel-li-click');
            $('#'+a).hide();

            if(a == "company_id"){
                $.get("/ops/jobs/search?company_name="+v, function (res) {
                    var res = JSON.parse(res);

                    $("input[name='address']").val(res.data.address);
                    $("input[name='lat']").val(res.data.lat+","+res.data.lng);
                    $("input[name='mobile']").val(res.data.mobile);

                    // console.log(res.data.area_tag);

                    var v = $('#area_tag').val();
                    $("#area_tag option[value='"+v+"']").prop("selected",false);

                    $("#area_tag option[value='"+res.data.area_tag+"']").prop("selected",true);
                    form.render();

                })
            }
        })

    }
    
    function search(a) {
        var keyword = $(a).val();

        $.get("/ops/jobs/company?keyword="+keyword, function (res) {
            var res = JSON.parse(res);

            var str = '';

            for (var i=0; i<res.data.length; i++){

                str += "<div class=\"sel-li\" data-value='"+res.data[i]['company_id']+"' onclick=\"setSelect('company_id', '"+res.data[i]['name']+"', this)\">"+res.data[i]['name']+"</div>"
            }
            console.log(str);

            $('#company_id').html(str)

        })

    }
    
</script>


</body>
</html>

